<template>
  <div class="app-container">
    <!-- 项目名称 -->
    <div class="block">项目名称</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
    </div>

    <div class="block">项目描述(每一项描述以英文逗号分隔)</div>
    <div style="margin-bottom: 15px">
      <el-input
        v-model="form.description"
        placeholder="请输入项目描述"
      ></el-input>
    </div>

    <div class="block">项目链接</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.url" placeholder="请输入项目链接"></el-input>
    </div>

    <div class="block">Github地址</div>
    <div style="margin-bottom: 15px">
      <el-input
        v-model="form.github"
        placeholder="请输入项目Github地址"
      ></el-input>
    </div>

    <div style="margin-bottom: 15px">
      <UploadImg uploadTitle="项目预览图地址" v-model="form.thumb" />
    </div>

    <div class="block">项目等级</div>
    <div style="margin-bottom: 15px">
      <el-select v-model="form.order" placeholder="分类等级">
        <el-option label="1" value="1"></el-option>
        <el-option label="2" value="2"></el-option>
        <el-option label="3" value="3"></el-option>
        <el-option label="4" value="4"></el-option>
        <el-option label="5" value="5"></el-option>
      </el-select>
    </div>
    <div style="width: 100%; text-align: right">
      <el-button type="primary" style="margin: 40px 0" @click="addProjecthandle">发布项目</el-button>
    </div>
  </div>
</template>

<script>
import {addProject} from "@/api/project";
import UploadImg from "@/components/UploadImg";
export default {
  components: {
    UploadImg,
  },
  data() {
    return {
      form: {
        name: "",
        description: "",
        url: "",
        github: "",
        order: 1,
      },
    };
  },
  methods: {
    addProjecthandle() {
      let obj = {...this.form};
      obj.description = obj.description.split(',');
      obj.order = parseInt(obj.order);
      obj.createDate = new Date().getTime() + "";
      addProject(obj).then(() => {
        this.$message.success("添加成功");
        this.$router.push('/projectList');
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin: 15px 0;
  font-weight: 100;
}
</style>